// 行为表格
import React from 'react';
import { connect } from 'dva';
import { TableC } from '../../../comps';
import { message } from 'antd';
import SettlementModal from './settlementModal';
import BehaviorDetail from '../BookkeepingSettle/behaviorDetail';
import _ from 'lodash';
class BondC extends React.Component {
  // props默认值
  static defaultProps = {
    onRef: () => {}, // 本组件的引用
  };
  state = {
    behaviorCurrentPage: 1, // 信息表表格页码
    behaviorPageSize: 10, // 信息表格每页展示条数
    behaviorPageInfo: { currentPage: 1, numInPage: 10, total: 0 }, // 信息表格展示底部分页数据
    behaviorColumns: [], // 信息表表格列
    behaviorDataSource: [], // 信息表格数据
    isReset: false, // 是否重置
    behaviorQueryItems: {}, // 信息表查询数据
    tradeInfo: {}, // 模态框数据
    isEdit: false, // 详情模态框
    isSettlement: false, // 交收模态框
    isDouble: false, // 是否双击数据
    // settlementType: '1',        // 是否交收 0-未交收 1-已交收
    rowData: '', // 双击数据标识
    accountId: '', // 获取流水表id
  };

  //初始化函数
  componentDidMount() {
    this.props.onRef(this);
    this.getbehaviorTableData(this.props.queryItems);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    // 查询条件变更时查询数据
    if (JSON.stringify(this.props.queryItems) != JSON.stringify(nextProps.queryItems)) {
      delete nextProps.queryItems.timestamp;
      this.getbehaviorTableData(nextProps.queryItems);
    }
  }

  //获取行为信息表格数据
  getbehaviorTableData = (queryItems, current, isSettlement) => {
    const { columns } = this.props.bookkeepingBehaviorM;
    const { behaviorCurrentPage, behaviorPageSize } = this.state;
    this.setState({
      // 表格loading
      behaviorColumns: undefined,
      behaviorDataSource: undefined,
      behaviorQueryItems: queryItems, // 更新本组件查询条件
      isDouble: false, //只要重新查新信息表数据，交易表数据也要重新双击数据展示
      isReset: false,
      rowData: '',
    });
    this.props.dispatch({
      type: 'moreFundsOrderM/getbehaviorData',
      payload: {
        ...queryItems,
        securityType: this.props.type,
        userId: localStorage.getItem('antd-pro-userId'),
        currentPage: current ? current : behaviorCurrentPage,
        numInPage: behaviorPageSize,
      },
      callback: (data) => {
        if (data) {
          let columnss = _.cloneDeep(columns);
          this.behaviorColumnsChange(columnss);
          this.setState(
            {
              behaviorDataSource: data.dataSource,
              behaviorPageInfo: data.pageInfo,
            },
            () => {
              if (isSettlement) {
                this.setState({ rowData: this.state.tradeInfo.id });
                this.props.onBehaviorDoubleClick(this.state.tradeInfo, true);
              }
            },
          );
        } else {
          this.setState({
            behaviorColumns: [],
            behaviorDataSource: [],
            behaviorPageInfo: { currentPage: 1, numInPage: 10, total: 0 },
          });
        }
      },
    });
  };

  // 信息表数据列优化
  behaviorColumnsChange = (columns) => {
    columns.splice(1, 2, {
      title: '产品组',
      dataIndex: 'productGroup',
      key: 'productGroup',
    });
    if (this.props.type == 4) {
      columns.splice(6, 1);
    }
    if (columns.length && columns[columns.length - 1].title != '操作') {
      columns.push({
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        type: 'operate',
        fixed: 'right',
        operates: [
          {
            title: '交收',
            onClick: (record, index) => {
              this.settlement(record);
            },
            rules: {
              //已交收隐藏
              hide: { items: [{ key: 'instructionStatus', value: ['4', '7', '8'], relation: ['=', '=', '='] }] },
            },
          },
          {
            title: '详情',
            onClick: (record, index) => {
              this.detail(record);
            },
            rules: {
              // hide: { items: [{ key: 'settlementType', value: ['0'], relation: ['='] }] }
            },
          },
        ],
      });
    }
    this.setState({ behaviorColumns: columns });
  };

  // 响应交收
  settlement = (record) => {
    this.setState({
      tradeInfo: record,
      isSettlement: true,
    });
  };

  // 响应详情
  detail = (record) => {
    this.setState({
      tradeInfo: record,
      isEdit: true,
    });
  };

  //响应重置
  onClear = () => {
    this.setState({ currentPage: 1, pageSize: 10, isReset: true });
  };

  //信息表分页点击
  behaviorTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    if (this.state.isReset) {
      //判断是否点击了重置 点击页码不进行后台查询
      message.warning('查询条件已被重置，请重新查询。');
      return;
    }
    this.setState(
      {
        behaviorCurrentPage: current,
        behaviorPageSize: pageSize,
      },
      () => {
        this.getbehaviorTableData(this.state.behaviorQueryItems);
      },
    );
  };

  // 模态框确定响应
  onOk = () => {
    this.setState({ isSettlement: false, isEdit: false });
    this.getbehaviorTableData(this.state.behaviorQueryItems, false, true);
    this.props.getAccountData(this.state.tradeInfo.id, 2);
    this.props.changeAccountType();
  };

  // 模态框取消响应
  onCancel = () => {
    this.setState({ isSettlement: false, isEdit: false });
  };
  changeRow = () => {
    this.setState({ rowData: ' ' });
  };

  render() {
    const { behaviorColumns, behaviorDataSource, behaviorPageInfo, rowData, isSettlement, isEdit, tradeInfo } = this.state;
    return (
      <div>
        <TableC
          columns={behaviorColumns}
          dataSource={behaviorDataSource}
          current={behaviorPageInfo.currentPage}
          pageSize={behaviorPageInfo.numInPage}
          total={behaviorPageInfo.total}
          scroll={{ x: 'max-content' }}
          rowKey='id'
          pagination={true}
          onChange={this.behaviorTableChange}
          onRow={(record, index) => {
            return {
              onDoubleClick: (event) => {
                //响应onDoubleClick事件
                this.props.onBehaviorDoubleClick(record);
                this.setState({
                  rowData: record.id,
                });
              },
            };
          }}
          rowClassName={(record, index) => {
            return record.id === rowData ? 'trade-select' : '';
          }}
        />
        {isEdit && <BehaviorDetail visible={isEdit} moreFunds={true} detailObj={tradeInfo} changeVisible={this.onCancel} />}
        {isSettlement && <SettlementModal visible={isSettlement} tradeInfo={tradeInfo} onOk={this.onOk} onCancel={this.onCancel} type={this.props.type} />}
      </div>
    );
  }
}

export default connect(({ moreFundsOrderM, bookkeepingBehaviorM }) => ({ moreFundsOrderM, bookkeepingBehaviorM }))(BondC);
